<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <div class="blacklist-container">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
      >
        <div
          class="container-item"
          v-for="(item, index) in blacklist"
          :key="index"
        >
          <div class="container-item-upper">
            <div class="item-upper-left">
              <div class="user-name">{{ item.Name }}</div>
              <div class="user-notes">(备注：{{ item.Remark }})</div>
            </div>
            <div class="item-upper-right">
              <button @click="remove(item.Mobile)">移除</button>
            </div>
          </div>
          <div class="container-item-below">
            <div class="user-phone">{{ maskPhoneNumber(item.Mobile) }}</div>
            <div class="user-time">
              拉黑时间：{{ dayjs(item.CrDate).format('YYYY-MM-DD') }}
              {{ dayjs(item.CrDate).format('HH:mm:ss') }}
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </page-wrap>
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { showToast } from 'vant';

const blacklist = ref([])
//表单
const postForm = reactive({
  pageIndex: 1,
  pageSize: 15
})
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    blacklist.value = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'queueBlockList',
    contentData: postForm
  })
  const nowList = resp.result
  const filteredData = nowList.filter(item => item.State === '拉黑')
  if (refresh===true) {
        if (filteredData.length!==postForm.pageSize) {
            finished.value = true
        }
    }
  Array.prototype.push.apply(blacklist.value, filteredData)
  if (filteredData.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh===true) {
        initBs.value++
    }
}
//------------------------------------------------------获取初始数据------------------------------------------------------------------
const Init = () => {
  loadData(true)
}
Init()
//------------------------------------------------------移出黑名单--------------------------------------------------------------------
const remove = value => {
  const queueState = Api.Common.AppObjProcess.Do({
    functionName: 'queueBlock',
    contentData: { mobile: value, remark: '', state: '0' }
  })
    .then(res => {
      showToast('移出成功')
      Init()
    })
  
}
//------------------------------------------------------电话号码处理--------------------------------------------------------------------
function maskPhoneNumber(phoneNumber) {
  return phoneNumber.replace(/(\d{3})\d+(\d{4})/, '$1****$2');
}

</script>

<style scoped lang="scss">
.blacklist-container {
  //   padding-top: 6px;
  .container-item {
    margin: 12px 20px;
    .container-item-upper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .item-upper-left {
        display: flex;
        align-items: center;
        .user-name {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 18px;
          margin-right: 8px;
        }
        .user-notes {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffdd99;
          line-height: 12px;
        }
      }
      .item-upper-right {
        button {
          border: 1px solid #ffaa00;
          background: #17171a;
          border-radius: 4px;
          padding: 9px 17px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffaa00;
          line-height: 14px;
        }
      }
    }
    .container-item-below {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-phone {
      }
      .user-time {
      }
    }
  }
}
</style>
